<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model="inputTxt">
    <hr>
    {{ inputTxt }}
    <button @click="fn">按钮</button>

    <hr>
    复选框的绑定：

    篮球<input type="checkbox" v-model="arr" value="篮球"/>
    足球<input type="checkbox" v-model="arr" value="足球"/>
    皮球<input type="checkbox" v-model="arr" value="皮球"/>
    台球<input type="checkbox" v-model="arr" value="台球"/>


    {{ arr }}

    <hr>
    单选框
    篮球<input type="radio" v-model="a" value="篮球"/>
    足球<input type="radio" v-model="a" value="足球"/>
    皮球<input type="radio" v-model="a" value="皮球"/>
    台球<input type="radio" v-model="a" value="台球"/>
    <br/>
    {{ a }}
    <hr>
    只有一个复选框 v-model绑定的（checked属性的值）
    <br>
  是不是美女：  <input type="checkbox" v-model="isBeauty">
  {{ isBeauty }}
  {{ isBeauty?'大美女':'好姑娘' }}
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el:'#app',
      data: {
        inputTxt: '初始值',
        arr: [],
        a: '',
        isBeauty: false
      },
      methods: {
        fn(){
          this.inputTxt = '值改变了'
        }
      }
    })
  </script>
</body>
</html>